<script lang="ts" setup name="GoodsRecord">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { deleteGoodsAPI, getGoodsList, getWaresCategoryListAPI } from '~/src/api/goods'
import { Inventory } from '~/src/api/interface/goods'
import { goodsColumns } from '../columns/goodsColumns'
import ProTable from '/@vab/components/ProTable/index.vue'

const router = useRouter()
const proTable = ref<ProTableInstance>()

const initParam = reactive({ goodsCategoryId: 0 })

const treeFilterData = ref<any>([])
const getTreeFilter = async () => {
  const { data } = await getWaresCategoryListAPI({})
  treeFilterData.value = data
  initParam.goodsCategoryId = treeFilterData.value[0].id
  goodsCategoryId.value = treeFilterData.value[0].id
}
const goodsCategoryId = ref(0)
// 树形筛选切换
const changeTreeFilter = (val: any) => {
  proTable.value!.pageable.pageNum = 1
  initParam.goodsCategoryId = val
  goodsCategoryId.value = val
}
// 删除
const deleteAccount = async (params: Inventory.ResGoodsList) => {
  await useHandleData(deleteGoodsAPI, { id: params.id }, `删除【${params.name}】商品`)
  proTable.value?.getTableList()
}

onMounted(() => {
  getTreeFilter()
})
const toCreate = (id: number) => {
  router.push('/goods/GoodsRecordEdit?id=' + id + '&categoryId=' + goodsCategoryId.value)
}

const onDelete = async () => {
  const ids: any = proTable.value?.selectedListIds
  if (!ids.length)
    return ElMessage({
      message: '当前未选中商品',
      type: 'error',
    })
  await useHandleData(deleteGoodsAPI, { id: ids }, '删除选中商品档案')
  proTable.value?.getTableList()
}
</script>

<template>
  <div class="auto-height-container auto-height-container main-box" style="flex-direction: row !important">
    <tree-filter
      :data="treeFilterData"
      :default-value="initParam.goodsCategoryId"
      :isCard="false"
      label="name"
      title="商品分类(单选)"
      @change="changeTreeFilter"
    />
    <div class="table-box">
      <pro-table
        ref="proTable"
        border
        :columns="goodsColumns"
        :indent="20"
        :init-param="initParam"
        :isCard="false"
        :request-api="getGoodsList"
        :request-auto="false"
        row-key="id"
        title="商品列表"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button v-auth="'add'" :icon="CirclePlus" type="primary" @click="toCreate(0)">新增商品</el-button>
          <el-button v-auth="'delete'" :icon="Delete" type="primary" @click="onDelete">删除</el-button>
        </template>
        <!-- 表格操作 -->
        <!-- <template #name="scope">
          <div class="flx-align-center">
            <el-image class="flx-shink0 width60 height60" :src="scope.row!.image">
              <template #error>
                <el-icon size="60"><icon-picture /></el-icon>
              </template>
            </el-image>
            <div class="ml10 flx-column-between">
              <el-text>{{ scope.row!.name }}</el-text>
              <el-text type="info">{{ scope.row!.number }}</el-text>
            </div>
          </div>
        </template> -->
        <template #barcode="{ row }">
          <el-button v-if="row.isGoods !== 2" v-auth="'edit'" :icon="EditPen" link type="primary" @click="toCreate(row.id)">
            {{ row.barcode }}
          </el-button>
        </template>
        <template #operation="scope">
          <el-button v-if="scope.row.isGoods !== 2" v-auth="'delete'" :icon="Delete" link type="primary" @click="deleteAccount(scope.row)">
            删除
          </el-button>
          <div v-if="scope.row.isGoods === 2">--</div>
        </template>
      </pro-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// .table-box {
//   height: 100%;
// }
</style>
